<template>
  <el-dialog title="提示" :show-close="false" :visible.sync="dialogVisible" width="50%" class="openfile">
    <div slot="title"></div>
    <div class="_content">
      <el-row>
        <el-col :span="6">
          <el-radio-group class="_content-item" v-model="type" size="small">
            <el-radio label="page" border>
              <i class="el-icon-files"></i><br />页面
            </el-radio>
            <el-radio label="component" border>
              <i class="el-icon-document"></i><br />组件
            </el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="18">
          <div class="_resources-tree">
            <el-tree :data="treeData" :empty-text="emptyText" :props="defaultProps"  default-expand-all @node-click="handleNodeClick"></el-tree>
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="intOpen">打 开</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
import { mapState, mapMutations, mapActions } from 'vuecx'
export default {
  components: {
    //empty
  },
  data() {
    return {
      type: "page",
      dialogVisible: true,
      emptyText:"您还没有创建页面哦！",
      defaultProps:{
          children: 'children',
          label: 'label'
      },
      dataDetail:'',
      treeData:[],
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    type(val,old){
      val != 'page' ? this.getComponentsData() : this.getPageData();
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

      // 获取所有页面
      this.getPageData();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapActions(['setConfig']),
    /**
     * 打开文件
     * @return {[type]} [description]
     */
    intOpen(){
      if(this.dataDetail){
        this.setConfig(this.dataDetail);
        this.dialogVisible = false;
      }
    },

    // 选择打开的页面
    handleNodeClick(data,node,event){
      this.dataDetail = '';
      if(this.type == 'page' && node.level == 2){
        this.getPageDetail(data);
      }else if(this.type == 'component'){
        this.getComponentsDetail(data);
      }
    },

    /**
     * 获取所有页面
     * @return {[type]} [description]
     */
    getPageData(){
      this.treeData = [];
      this.emptyText = "您还没有创建页面哦！"
      this.$cloud.get("build/page_all",).then(response => {
        if(Array.isArray(response)){
          let data = []
          response.forEach((item,index) => {
            if(item.children.length > 0){
              data.push(item)
            }
          })
          this.treeData = data;
        }
      })
    },

    /**
     * 获取单个页面信息
     * @return {[type]} [description]
     */
    getPageDetail(data){
      this.$cloud.post("build/page_one",{name:data.value,path:data.path}).then(response => { 
        this.dataDetail = response.config;
      })
    },

    /**
     * 获取所有组件
     */
    getComponentsData(){
      this.treeData = [];
      this.emptyText = "您还没有创建组件哦！"
      this.$cloud.get("build/component_all",).then(response => {
        if(Array.isArray(response)){
          this.treeData = response;
        }
      })
    },

    /**
     * 获取单个组件信息
     * @return {[type]} [description]
     */
    getComponentsDetail(data){
      this.$cloud.post("build/component_one",{name:data.value}).then(response => {
        this.dataDetail = response.config;
      })
    }
  }
}

</script>
<style type="text/css" lang="scss">
.openfile {
  .el-dialog__header {
    padding: 0px;
  }

  .el-dialog__body {
    padding: 0px;
  }

  ._content {
    .el-row {
      border-bottom: solid 1px #dfdfdf;
    }

    .el-col {
     border-right:solid 1px #dfdfdf;
     height: 400px;
    }

    ._content-item {
      width: calc(100% - 40px);
      margin: 20px;
      margin-bottom: 0px;
      .el-radio {
        width: 100%;
        margin: 0px;
        margin-bottom: 20px;
        text-align: center;
        padding-bottom: 15px;
        padding-top: 15px;
      }

      .el-radio__input {
        height: 0px !important;
        display: none;
      }

      .el-radio__label {
        margin: 0px;
        padding-left: 0px;
        font-size: 14px;
      }

      .el-radio.is-bordered,
      .el-radio--small.is-bordered {
        height: 100%;
      }

      i {
        font-size: 36px;
        margin-bottom: 5px;
      }
    }



    ._resources-tree{
      height: 100%;
      overflow-y:auto;
      padding:20px;
      // margin: 20px;
    }
  }
}

</style>
